<template>
	<view class="wrap" style="margin-bottom: 29upx;" v-if="showNotice">
		<image style="width: 100upx;height: 24upx;" src="@/static/home/notice.png"></image>
		<view class="line"></view>
		<!-- <view class="text">{{text}}</view> -->
		
		<swiper
			vertical="true"
			circular
			:autoplay="true"
			class="u-notice__swiper"
			>
			<swiper-item
				v-for="(item, index) in noticelist"
				:key="index"
				class="u-notice__swiper__item"
				@click="goDetail(index)">
				<text class="u-notice__swiper__item__text ">
					{{item}}
				</text>
			</swiper-item>
		</swiper>
		
		<u-icon color="#333" size="12" name="arrow-right" @click="goList"></u-icon>
		
	</view>
</template>

<script>
	import {messageNoticelist} from '@/common/api.js';
	
export default {
	data(){
		return{
			noticelist: [],
			showNotice:false,
			vo:[]
		}
	},
	computed: {
		isNotLogin() {
			return uni.$u.test.isEmpty(this.$store.state.user.userInfo);
		}
	},
	mounted() {
		uni.$on('login', res=>{
			this.getData()
		})
		uni.$on('logout', res=>{
			this.showNotice = false;
		})
		
		if(!this.isNotLogin){
			this.getData()
		}
	},
	methods:{
		getData(){
			messageNoticelist({
				params: {
					type: 1,
					pageNo: 1,
					pageSize: 10,
				}
			}).then(res=>{
				
				this.vo = res.vo;
				
				if(uni.$u.test.isEmpty(res)||uni.$u.test.isEmpty(res.vo)){
					this.showNotice = false;
				}else{
					this.showNotice = true;
					this.noticelist = res.vo.map(item=>item.title);
				}
			}).catch(e=>{
				this.showNotice = false;
			})
		},
		
		goDetail(index){
			uni.navigateTo({
				url: '/pagesB/mine/message/messagedetail?id=' + this.vo[index].id,
			})
		},
		
		goList(){
			uni.navigateTo({
				url: '/pagesB/mine/message/message',
			})
		}
		
	}
	
}
</script>

<style lang="scss" scoped>
.wrap{
	width: 92%;
	height: 57upx;
	margin: 0 auto;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 17upx 28upx 17upx 19upx;
	box-sizing: border-box;
	border-radius: 8upx;
}
.line{
	width: 2px;
	height: 29upx;
	background-color: #ECECEC;
	margin: auto 19upx auto 15upx;
}
.text{
	color: #333333;
	font-size: 22upx;
	line-height: 64px;
	margin-left: 19upx;
	flex: 1;
}

.u-notice {
	@include flex;
	align-items: center;
	justify-content: space-between;

	&__left-icon {
		align-items: center;
		margin-right: 5px;
	}

	&__right-icon {
		margin-left: 5px;
		align-items: center;
	}

	&__swiper {
		height: 16px;
		@include flex;
		align-items: center;
		flex: 1;

		&__item {
			@include flex;
			align-items: center;
			overflow: hidden;

			&__text {
				font-size: 11px;
				color: $black33;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
